/**
 * 组件名称：WideIpdToolItem
 * 使用场景：Sidebar中的紫色导航按钮(用于宽屏幕下展示)
 * 功能介绍：单个具有访问状态的工具按钮，工具面向所有人，无需权限判定
 * 功能进度：100%
 * 待办事项：无
 */
"use client";
import Link from "next/link";
import classes from "./WideIpdToolItem.module.css";
import {UnstyledButton, Image} from "@mantine/core";
import {usePathname, useSelectedLayoutSegment} from "next/navigation";

interface ImageProps {
  src: string;
  alt: string;
}

interface ToolProps {
  link: string;
  label: string;
  img: ImageProps;
}

// 自己写的拆解前缀的函数，用于屏蔽工具目录下的多级子目录，从而实现左侧工具菜单的正常选中
function extractPrefix(path: string) {
  const parts = path.split("/");
  if (parts.length > 3) {
    const prefixLists = parts.slice(0, 4);
    return prefixLists.join("/");
  } else {
    return path;
  }
}
export const WideIpdToolItem = ({link, label, img}: ToolProps) => {
  const realhref = `/ipdv2/tools/${link}`;
  const pathname = usePathname();
  const pathnamePrefix = extractPrefix(pathname);
  // 测试输出
  // console.log(realhref, pathname, pathnamePrefix);
  const isActive = pathnamePrefix === realhref;

  return (
    <UnstyledButton
      component={Link}
      href={realhref}
      className={isActive ? classes.linkSelected : classes.linkDefault}
    >
      <Image
        h={20}
        w="auto"
        fit="contain"
        alt={img.alt}
        src={img.src}
        className={isActive ? classes.imgSelected : classes.imgDefault}
      />
      <span className={classes.text}>{label}</span>
    </UnstyledButton>
  );
};
